<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="../head.jsp"></jsp:include>

    <style>
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }

        .head{
            margin: 10px 20px;
            background: white;
            padding: 10px 20px 1px 20px;
            box-shadow: 0px 0px 5px darkgrey;
        }

        #dialog{
            margin: 20px;
            padding: 10px 10px 1px 10px;
            background: white;
            /*display: none;*/
        }

        .content{
            margin: 10px 20px;
            background: white;
            padding: 10px 20px 10px 20px;
        }
    </style>
</head>
<body>

<div class="container head">
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="roleName" lay-verify="required" autocomplete="off" placeholder="请输入角色名" class="layui-input">
            </div>
            <div class="layui-form-inline">
                <button class="layui-btn" lay-submit lay-filter="searchBtn">搜索</button>
                <button class="layui-btn layui-btn-normal" type="button" id="addBtn">添加</button>
            </div>
        </div>
    </form>
</div>

<div class="container content">
    <table class="layui-hide" id="role" lay-filter="role"></table>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="remove">删除</button>
    </div>
</script>

<script type="text/html" id="dialogHtml">
<div id="dialog">
    <form action="" class="layui-form" lay-filter="dialog-form">
        <input type="hidden" name="roleId" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" lay-verify="required|roleName" autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色菜单</label>
            <div class="layui-input-block">
                <div id="menus"></div>
            </div>
        </div>

        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="dialogBtn" id="dialogBtn">提交</button>
            </div>
        </div>
    </form>
</div>
</script>

<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['table','form','tree'], function(){
        var table = layui.table;
        var form = layui.form;
        var tree = layui.tree;
        var layerIdx;
        var flag = 'add';

        initTable();

        form.on('submit(searchBtn)', function(data){
            search(data.field)
            return false;
        })

        form.on('submit(dialogBtn)', function(data){
            var selected = getSelectedMenus();
            var formData = data.field;
            formData.selected = selected;
            console.log(formData)
            update(formData,flag)
            return false;
        })

        form.verify({
            roleName: function(value, item){
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '角色名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '角色名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '角色名不能全为数字';
                }
                if(value.length <= 1){
                    return '角色名长度至少2个字符';
                }
            }
        });

        //监听工具条
        table.on('tool(role)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            console.log(data)
            if(layEvent === 'remove'){ //删除
                layer.confirm('真的删除？', function(index){
                    remove(data);
                });
            } else if(layEvent === 'edit'){ //编辑
                flag = 'edit';
                showDialog(data);
            }
        });

        $('#addBtn').click(function () {
            flag = 'add';
            showDialog();
        })

        // 更新
        function update(roleData,flag) {
            if (roleData.selected == undefined || roleData.selected.length == 0){
                layer.msg("请选择角色菜单",{icon:5,time:1000})
                return
            }

            var url = flag == 'add'?'/role/add':'/role/update';
            $.ajax({
                url: url,
                dataType: 'json',
                data:roleData,
                type: 'POST',
                success: function (res) {
                    if(res.code == 200){
                        reloadTable();
                        if(layerIdx) layer.close(layerIdx);
                    }else{
                        layer.msg(res.msg,{icon:5,time:1000})
                    }
                }
            })
        }

        function remove(data) {
            $.ajax({
                url:'/role/delete',
                data:{roleId:data.roleId},
                type:"POST",
                success:function (res) {
                    if(res.code == 200){
                        reloadTable();
                        layer.msg('删除成功',{icon:6,time:1000})
                    }else{
                        layer.msg(res.msg,{icon:5,time:1000})
                    }
                }
            })
        }

        function search(searchDta){
            table.reload('role', {
                url: '/role/search'
                ,where:searchDta
                ,page: {
                    curr: 1
                }
            });
        }

        function showDialog(role) {
            initDialogForm(role);
            layerIdx = layer.open({
                type: 1,
                area: ['400px', '500px'],
                title:'添加',
                btn: ['添加'],
                content: $('#dialogHtml').html(),
                yes:function(){
                    $('#dialogBtn').click();
                }
            });
        }

        function initDialogForm(role){
            console.log(role)

            $.ajax({
                url: '/role/menuList',
                dataType: 'json',
                type: 'get',
                data:{roleId:role?role.roleId:0},
                success: function (res) {
                    if (role){
                        form.val("dialog-form", {
                            "roleId": role.roleId
                            ,"roleName": role.roleName
                        });
                    }
                    if (res.code == 200){
                       tree.render({
                           elem: '#menus'  //绑定元素
                           ,showCheckbox:true
                           ,id:'menusTree'
                           ,data: res.data.menus
                       });

                        tree.setChecked('menusTree', res.data.selected)
                    }
                }
            })
        }

        function initTable(){
            table.render({
                elem: '#role'
                ,url:'/role/list'
                ,width:400
                ,cols: [[
                    {field:'roleId', width:80, title: 'ID', sort: true}
                    ,{field:'roleName', title: '角色名称'}
                    ,{title:'操作', toolbar: '#toolbar', width:150}
                ]]
                ,page: true
            });
        }

        function reloadTable() {
            table.reload('role', {
                url: '/role/list'
            });
        }

        function getSelectedMenus() {
            var data = tree.getChecked('menusTree');
            var selected = [];
            f(data,selected);
            return selected;
        }
        function f(chd,selected) {
            chd.forEach(function (item) {
                var menuId = item.id;
                selected.push(menuId);
                var arr = item.children;
                if (arr){
                    f(arr,selected);
                }
            })
        }
    });
</script>
</body>
</html>
